<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">按钮</button>
    <script>
        /*
            --键盘事件--

            鼠标事件（鼠标事件-- ）
                on  click:用户单击鼠标按钮 **********
                ondblclick:当用户双击主鼠标按钮时触发
                onmousedown:当用户按下鼠标还未弹起时触发
                onmouseup：当用户释放鼠标按钮时触发
                onmouseover：当鼠标移到某个元素上方时触发
                onmouseout：当鼠标移出某个元素上方时触发
                onmousemove：当鼠标指针在元素上移动时触发
                onmouseenter：当鼠标移到某个元素上方时触发
                onmouseleave：当鼠标移出某个元素上方时触发


            html事件 onload onscroll

        */
        var btn = document.querySelector("#btn");
        btn.onclick = function () {
            console.log('点击--单击');
        }
        // btn.ondblclick = function () {
        //     console.log('双击');
        // }

        btn.onmousedown = function () {
            console.log('鼠标按下');
        }
        btn.onmouseup = function () {
            console.log('鼠标抬起');
        }

        // onmouseover：当鼠标移到某个元素上方时触发
        btn.onmouseover = function () {
            console.log('移入元素 over');
        }
        // onmouseout：当鼠标移出某个元素上方时触发
        btn.onmouseout = function () {
            console.log('移入元素 out');
        }


        // onmousemove：当鼠标指针在元素上移动时触发
        btn.onmousemove = function () {
            console.log('在元素上移动');
        }


        // onmouseenter：当鼠标移到某个元素上方时触发
        // onmouseleave：当鼠标移出某个元素上方时触发

        btn.onmouseenter = function () {
            console.log('enter-移入');
        }
        btn.onmouseleave = function () {
            console.log('levae 移出');
        }

    </script>

</body>

</html>